<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年09月02日 14:27
 * @Copyright:  2022-2023
!-->
<template>
  <div class="archive-container">
    <el-tabs v-model="activeTab" @tab-click="handleParenActiveTabChange">
      <el-tab-pane name="type" class="archive-tab">
        <span slot="label"><i class="el-icon-tickets"/> 分类 </span>
        <el-tabs
          v-model="activeTabType"
          tab-position="left"
          class="archive-type-tag"
          @tab-click="handleActiveTabChange"
        >
          <el-tab-pane
            v-for="(item, index) in typeList"
            :key="index"
            :name="item['typeCode']"
            :label="item['typeName']"
            class="archive-tab"
          >
            <el-empty v-if="articleList.length === 0" :image-size="150"></el-empty>
            <el-timeline v-else>
              <el-timeline-item
                v-for="(article, index) in articleList"
                :key="index"
                :timestamp="article['createTime']"
                placement="top"
                size="large"
              >
                <el-card>
                  <router-link :to="'/info/'+article.id">
                    <div class="article-card-main">
                      <div class="article-title">
                        {{article['blogTitle']}}
                      </div>
                      <div class="article-tag-all">
                        <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 转载
                        </el-tag>
                        <el-tag v-else type="success" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 原创
                        </el-tag>
                        <el-tag v-for="(item2, index2) in article.tagList" :key="item2.tagId" :type="tagType[index2]" size="medium" class="article-tag">
                          <el-icon class="el-icon-discount" /> {{ item2.tagName }}
                        </el-tag>
                      </div>
                    </div>
                  </router-link>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-if="typeList.length === 0" :image-size="150"></el-empty>
      </el-tab-pane>
      <el-tab-pane name="tag">
        <span slot="label"><i class="el-icon-collection-tag"/> 标签 </span>
        <el-tabs
          v-model="activeTabTag"
          tab-position="left"
          class="archive-type-tag"
          @tab-click="handleActiveTabChange"
        >
          <el-tab-pane
            v-for="(item, index) in tagList"
            :key="index"
            :name="item['tagName']"
            :label="item['tagName']"
            class="archive-tab"
          >
            <el-empty v-if="articleList.length === 0" :image-size="150"></el-empty>
            <el-timeline v-else>
              <el-timeline-item
                v-for="(article, index) in articleList"
                :key="index"
                :timestamp="article['createTime']"
                placement="top"
                size="large"
              >
                <el-card>
                  <router-link :to="'/info/'+article.id">
                    <div class="article-card-main">
                      <div class="article-title">
                        {{article['blogTitle']}}
                      </div>
                      <div class="article-tag-all">
                        <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 转载
                        </el-tag>
                        <el-tag v-else type="success" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 原创
                        </el-tag>
                        <el-tag v-for="(item2, index2) in article.tagList" :key="item2.tagId" :type="tagType[index2]" size="medium" class="article-tag">
                          <el-icon class="el-icon-discount" /> {{ item2.tagName }}
                        </el-tag>
                      </div>
                    </div>
                  </router-link>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-if="tagList.length === 0" :image-size="150"></el-empty>
      </el-tab-pane>
      <el-tab-pane name="archive" class="archive-timeline">
        <span slot="label"><i class="el-icon-notebook-1"/> 归档 </span>
        <el-tabs
          v-model="activeTabTime"
          tab-position="left"
          class="archive-type-tag"
          @tab-click="handleActiveTabChange"
        >
          <el-tab-pane
            v-for="(item, index) in timeList"
            :key="index"
            :name="item['createTime']"
            :label="formatToYearMonth(item['createTime'])"
            class="archive-tab"
          >
            <el-empty v-if="articleList.length === 0" :image-size="150"></el-empty>
            <el-timeline v-else>
              <el-timeline-item
                v-for="(article, index) in articleList"
                :key="index"
                :timestamp="article['createTime']"
                placement="top"
                size="large"
              >
                <el-card>
                  <router-link :to="'/info/'+article.id">
                    <div class="article-card-main">
                      <div class="article-title">
                        {{article['blogTitle']}}
                      </div>
                      <div class="article-tag-all">
                        <el-tag v-if="article['original'] == 0" type="info" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 转载
                        </el-tag>
                        <el-tag v-else type="success" size="medium" class="article-tag">
                          <el-icon class="el-icon-set-up" /> 原创
                        </el-tag>
                        <el-tag v-for="(item2, index2) in article.tagList" :key="item2.tagId" :type="tagType[index2]" size="medium" class="article-tag">
                          <el-icon class="el-icon-discount" /> {{ item2.tagName }}
                        </el-tag>
                      </div>
                    </div>
                  </router-link>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-if="timeList.length === 0" :image-size="150"></el-empty>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { listAllType } from "@/api/blog/type";
import { queryAllTag } from "@/api/blog/tag";
import { listBlog, queryTimeList } from "@/api/blog/article";
import { formatToYearMonth } from "@/utils/DateUtil";

@Component({
  methods: { formatToYearMonth }
})
export default class index extends Vue {

  /** 当前tab */
  private activeTab: any = 'type';

  /** 分类当前tab */
  private activeTabType: any = '';

  /** 标签当前tab */
  private activeTabTag: any = '';

  /** 标签当前时间 */
  private activeTabTime: any = '';

  /** 分类列表 */
  private typeList: any = [];

  /** 标签列表 */
  private tagList: any = [];

  /** 时间轴时间数据 */
  private timeList: any = [];

  /** 文章列表 */
  public articleList: any = [];

  /** 标签颜色 */
  private tagType: any = ['success', 'warning', 'danger', 'info'];

  private created() {
    this.queryTypeList();
    this.queryTagList();
    this.queryTimeList();
  }

  private mounted() {
    this.$nextTick(() => {
      const el:any = document.getElementById('layout-container');
      el.scrollTop = 0;
    })
  }

  /** 获取文章列表 */
  private queryArticleList(paramType: string, value: string) {
    let param: any = {
      pageNum: 1,
      pageSize: 9999999999,
    }
    param[paramType] = value;
    listBlog(param).then((res: any) => {
      this.articleList = res.rows;
    })
  }

  /** 获取分类数据 */
  private queryTypeList() {
    listAllType().then((res: any) => {
      this.typeList = res.data;
      if (this.typeList.length > 0) {
        this.activeTabType = this.typeList[0]['typeCode'];
        this.queryArticleList('blogType', this.activeTabType);
      }
    })
  }

  /** 获取标签数据 */
  private queryTagList() {
    queryAllTag().then((res: any) => {
      this.tagList = res.data;
      if (this.tagList.length > 0) {
        this.activeTabTag = this.tagList[0]['tagName'];
      }
    })
  }

  /** 获取时间轴时间数据 */
  private queryTimeList() {
    queryTimeList().then((res: any) => {
      this.timeList = res.data;
      if (this.timeList.length > 0) {
        this.activeTabTime = this.timeList[0]['createTime'];
      }
    })
  }

  /** 父类变更 */

  /** 大类变更 */
  public handleParenActiveTabChange() {
    if (this.activeTab === 'type') {
      if (this.typeList.length > 0) {
        this.activeTabType = this.typeList[0]['typeCode'];
        this.queryArticleList('blogType', this.activeTabType);
      }
    }
    if (this.activeTab === 'tag') {
      if (this.tagList.length > 0) {
        this.activeTabTag = this.tagList[0]['tagName'];
        this.queryArticleList('blogTag', this.activeTabTag);
      }
    }
    if (this.activeTab === 'archive') {
      if (this.timeList.length > 0) {
        this.activeTabTime = this.timeList[0]['createTime'];
        this.queryArticleList('createTime', this.activeTabTime);
      }
    }
  }

  /** 子类变更 */
  public handleActiveTabChange() {
    if (this.activeTab === 'type') {
      this.queryArticleList('blogType', this.activeTabType);
    }
    if (this.activeTab === 'tag') {
      this.queryArticleList('blogTag', this.activeTabTag);
    }
    if (this.activeTab === 'archive') {
      this.queryArticleList('createTime', this.activeTabTime);
    }
  }
}
</script>
<style scoped lang="scss">
.archive-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 170px);
  overflow: hidden;
  .archive-timeline {
    display: flex;
    flex-direction: row;
    gap: 20px;
    .archive-tab-timeline {
      width: 180px;
      height: 100%;
      border-right: 3px solid #DCDFE6;
      ::v-deep .el-timeline {
        padding: 0;
      }
    }
    .archive-tab-timeline-content {
      width: calc(100% - 203px);
    }
  }

  ::v-deep .el-tabs__content {
    height: calc(100vh - 212px);
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;

  }
  ::v-deep .el-tabs__header {
    margin-bottom: 0 !important;
  }
  ::v-deep .el-tabs__nav {
    text-align: center;
    width: 100%;
  }
  ::v-deep .el-tabs__item {
    font-size: 18px;
  }
  ::v-deep .el-tabs__active-bar {
    width: 0px !important;
  }
  ::v-deep .archive-tab {
    display: flex;
    flex-direction: row;
    .archive-tab-timeline {
      width: 20%;
    }
    .el-timeline {
      padding: 0;
    }
    .el-empty {
      margin: auto auto auto calc(50% - 173px);
    }
  }
  ::v-deep .el-tabs--left .el-tabs__active-bar.is-left {
    right: auto;
    left: 0;
  }
  ::v-deep .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    left: 0;
    right: auto;
  }
  ::v-deep .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
  }
  .archive-type-tag {
    width: 100%;
    .archive-tab {
      ::v-deep .el-timeline {
        width: 100%;
        .el-timeline-item__timestamp {
          font-size: 15px;
          font-weight: 600;
          color: rgb(95, 95, 95);
        }
      }
    }
    ::v-deep .el-tabs__item {
      padding: 0 20px 0 20px !important;
      width: 180px;
      font-size: 15px !important;
    }
    ::v-deep .el-tabs__content {
      border: unset !important;
      height: calc(100vh - 255px);
      border: 1px solid red;
      overflow: auto;
      padding: 20px;
    }
    ::v-deep .el-tabs__nav-scroll {
      height: calc(100vh - 310px);
      overflow: auto;
    }
    ::v-deep .el-tabs__active-bar {
      width: 11px !important;
      height: 11px !important;
      border-radius: 50%;
      top: 14px !important;
    }
  }
  .article-card-main {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20px;
    cursor: pointer;
    .article-title {
      font-size: 18px;
      font-weight: 600;
      color: rgb(95, 95, 95);
    }
    .article-tag-all {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 15px;
    }
    ::v-deep .el-card__body {
      width: 100%;
    }
  }
}
@media only screen and (max-width: 850px) {
  ::v-deep .el-tabs__item {
    width: 100px !important;
    padding: 0 10px !important;
  }
  .archive-tab-timeline {
    width: 100px !important;
  }
  ::v-deep.el-empty {
    margin: auto auto auto calc(50% - 93px) !important;
  }
  ::v-deep .el-timeline-item__wrapper {
    padding-left: 18px !important;
  }
  .archive-type-tag {
    ::v-deep .el-tabs__content {
      padding: 10px !important;
    }
  }
  ::v-deep .el-tabs--left .el-tabs__header.is-left {
    margin-right: 0 !important;
  }
}
</style>
